<template>
  <div class="EquipStatistic">
    <div class="flex location-wrap">
      <span class="white">当前位置：</span>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/EDManagement' }">应急处置</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/ResourceAllocation' }">资源调配</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/ResourceStatisticsList' }">资源投入统计</el-breadcrumb-item>
        <el-breadcrumb-item>装备信息明细</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="box">
      <div style="height:50px">
        <el-row style="float:right;margin:auto">
          <el-button size="small" @click="AddFh">返回</el-button>
        </el-row>
      </div>
      <!-- 列表表格 -->
      <LsdTable slot="gjxm" :paginationAtrrs="paginationAtrrs" @pageChange="handleSizeChange" :compRef="table.compRef" ref="gjxm" :columns="table.columns" :title="table.title" :tableData="table.tableData" :tableAttr="table.tableAttr" :isShowPage="table.isShowPage" :isSequenceFlag="table.isSequenceFlag" />
    </div>
  </div>
</template>

<script>
// import { EquipmentDetail } from "./StatisticsList.js"

import { Equip } from "@/api/EmergencyDisposal/zydp.js";
export default {
  name: "EquipStatistic",
  components: {},
  data() {
    return {
      type: 0,
      // 表格信息
      table: {
        compRef: "gjxm",
        isSequenceFlag: true, // 是否展示序号
        isShowPage: true, // 是否展示分页
        title: "装备信息明细",
        tableData: [],
        columns: [

          {
            prop: "unit",
            label: "所属地市级单位",
            align: "center"
          },
          {
            prop: "department",
            label: "所属县公司/部门",
            align: "center"
          },
          {
            prop: "largeCategory",
            label: "装备大类",
            align: "center"
          },
          // {
          //   prop: "middleCategory",
          //   label: "装备中类",
          //   align: "center"
          // },
          {
            prop: "smallCategory",
            label: "装备小类",
            align: "center"
          },
          {
            prop: "equipName",
            label: "装备名称",
            align: "center"
          },
          {
            prop: "count",
            label: "现有数量",
            align: "center"
          },
          {
            prop: "preserver",
            label: "保管人",
            align: "center"
          },
          {
            prop: "equipStatus",
            label: "状态",
            align: "center"
          },
          {
            prop: "manufactureDate",
            label: "生产日期",
            align: "center"
          },
          {
            prop: "maintenanceCycle",
            label: "保养周期",
            align: "center",
            fixed: "right"
          }
        ],
        // 表格样式
        tableAttr: {
          "max-height": "580px",
          height: "580px",
          stripe: true,
          border: true,
          fit: true,
          "show-header": true,
          "highlight-current-row": true,
          "cell-style": {
            "font-size": "16px"
          },
          "header-cell-style": {
            "text-align": "center",
            "background-color": "#B1C8F9",
            border: "1px solid #ccc",
            "font-size": "16px"
          },
          "row-style": {
            height: "60px"
          }
        }
      },
      // 分页信息
      paginationAtrrs: {
        total: 0,
        "background": true,
        layout: "prev, pager, next",
        "current-page": 1,
        "page-size": 10
      },
      pageNum: 1,
      pageSize: 10
    };
  },
  mounted() {
  },
  created() {
    this.getEquipStatistic();// 获取装备信息
  },
  methods: {
    // 返回上一级
    AddFh() {
      this.$router.go(-1);
    },
    // 分页
    handleSizeChange(val) {
      this.pageNum = val["current-page"];
      this.pageSize = val["page-size"];
      // this.list()
      this.getEquipStatistic();
    },
    getEquipStatistic() {
      Equip({ "sourceInfoId": this.$route.query.id, "pageNum": this.pageNum, "pageSize": this.pageSize }).then(res => {
        // this.tableData = res.data
        this.table.tableData = res.data;
        this.pageNum = res.pageNum;
        this.pageSize = res.pageSize;
        this.paginationAtrrs.total = res.total;
      });

    }

  }
};
</script>

<style scoped lang="less">
//@import "../../../assets/style/ComponentStyle.less";
:deep(.el-breadcrumb) {
  font-size: 16px;
}
:deep(.el-breadcrumb__inner.is-link) {
  font-weight: 100;
  color: #fff;
  font-size: 16px;
}
.EquipStatistic :deep(.el-breadcrumb__item:last-child .el-breadcrumb__inner) {
  color: #3270ff;
  font-size: 16px;
}
.EquipStatistic {
  height: 100%;
}
.box {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin-top: 15px;
  background-color: #fff;
  border-radius: 4px;
  padding: 10px;
  box-sizing: border-box;
}
</style>
